<template>
    <div>
      <transition appear enter-active-class="animated fadeIn">
      <q-table
        class="my-sticky-header-column-table shadow-24"
        :data="table_list"
        row-key="id"
        :separator="separator"
        :loading="loading"
        :filter="filter"
        :columns="columns"
        hide-bottom
        :pagination.sync="pagination"
        no-data-label="No data"
        no-results-label="No data you want"
        :table-style="{ height: height }"
        flat
        bordered
      >
         <template v-slot:top>
           <q-btn-group push>
             <q-btn :label="$t('refresh')" @click="reFresh()" />
           </q-btn-group>
           <q-space />
           <q-input class="cordova-search" outlined rounded dense debounce="300" color="primary" v-model="filter" :placeholder="$t('search')" @blur="getSearchList()" @keyup.enter="getSearchList()">
             <template v-slot:append>
               <q-icon name="search" @click="getSearchList()"/>
             </template>
           </q-input>
         </template>
         <template v-slot:body="props">
           <q-tr :props="props">
               <q-td key="staff_name" :props="props">
                 {{ props.row.staff_name }}
               </q-td>
               <q-td key="staff_type" :props="props">
                 {{ props.row.staff_type }}
               </q-td>
             <q-td key="create_time" :props="props">
               {{ props.row.create_time }}
             </q-td>
             <q-td key="update_time" :props="props">
               {{ props.row.update_time }}
             </q-td>
               <q-td key="action" :props="props" style="width: 240px">
                 <q-btn color="teal" :label="$t('contact')" @click="ChatWith(props.row.staff_name)" />
               </q-td>
           </q-tr>
         </template>
        </q-table>
      </transition>
      <template>
        <div class="q-pa-lg flex flex-center cordova-footer">
          <q-btn v-show="pathname_previous" flat push color="purple" :label="$t('previous')" icon="navigate_before" @click="getListPrevious()">
            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]" content-style="font-size: 12px">
              {{ $t('previous') }}
            </q-tooltip>
          </q-btn>
          <q-btn v-show="pathname_next" flat push color="purple" :label="$t('next')" icon-right="navigate_next" @click="getListNext()">
            <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]" content-style="font-size: 12px">
              {{ $t('next') }}
            </q-tooltip>
          </q-btn>
          <q-btn v-show="!pathname_previous && !pathname_next" flat push color="dark" :label="$t('no_data')"></q-btn>
        </div>
      </template>
      <q-dialog v-model="chat">
    <q-card style="width: 600px">
      <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
        <div>{{ receiver }}</div>
        <q-space/>
        <q-btn dense flat icon="close" v-close-popup>
          <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[20, 20]" content-style="font-size: 12px" @click="ChatClose()">
            {{ $t('index.close') }}</q-tooltip>
        </q-btn>
      </q-bar>
      <q-separator/>
      <q-card-section id="chat_scroll" style="max-height: 50vh; height: 50vh" class="scroll">
        <template>
          <div class="q-pa-md row justify-center">
            <q-btn flat rounded :label="$t('loadmore')" @click="LoadChatList()" v-show="chat_next !== null"></q-btn>
            <div style="width: 100%">
              <q-chat-message v-show="chat_next === null" :label="$t('nomoremessage')" />
              <div v-for="item in chat_list" :key="item.id">
                <q-chat-message v-if="item.sender === sender + '-' + openid"
                                :name="sender"
                                :text="[item.detail]"
                                bg-color="light-green-4"
                                name-sanitize
                                sent
                                text-sanitize
                />
                <q-chat-message v-else
                                :name="receiver"
                                :text="[item.detail]"
                                text-sanitize
                                name-sanitize
                                bg-color="grey-4"
                />
              </div>
            </div>
          </div>
        </template>
      </q-card-section>
      <q-separator/>
      <q-card-actions align="right">
        <q-input autofocus dense outlined square v-model="chat_text" :placeholder="$t('sendmessage')" class="bg-white col" @keyup.enter="websocketsend()" @keyup.esc="ChatClose()" />
        <q-btn flat :label="$t('send')" color="primary" @click="websocketsend()"></q-btn>
      </q-card-actions>
    </q-card>
    </q-dialog>
    </div>
</template>
    <router-view />

<script>
import { getauth, wsurl } from 'boot/axios_request'
import { date, LocalStorage } from 'quasar'
var ws

export default {
  name: 'Pagestafflist_scan',
  data () {
    return {
      openid: '',
      login_name: '',
      authin: '0',
      pathname: 'staff/',
      pathname_previous: '',
      pathname_next: '',
      separator: 'cell',
      loading: false,
      height: '',
      table_list: [],
      staff_type_list: ['Manager', 'Inbound', 'Outbound', 'Supervisor', 'StockControl', 'Customer', 'Supplier'],
      columns: [
        { name: 'staff_name', required: true, label: this.$t('staff.view_staff.staff_name'), align: 'left', field: 'staff_name' },
        { name: 'staff_type', label: this.$t('staff.view_staff.staff_type'), field: 'staff_type', align: 'center' },
        { name: 'create_time', label: this.$t('createtime'), field: 'create_time', align: 'center' },
        { name: 'update_time', label: this.$t('updatetime'), field: 'update_time', align: 'center' },
        { name: 'action', label: this.$t('action'), align: 'right' }
      ],
      filter: '',
      pagination: {
        page: 1,
        rowsPerPage: '30'
      },
      sender: '',
      receiver: '',
      chat: false,
      chat_list: '',
      chat_text: '',
      chat_next: null
    }
  },
  methods: {
    getList () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname, {
        }).then(res => {
          _this.table_list = res.results
          _this.pathname_previous = res.previous
          _this.pathname_next = res.next
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      } else {
      }
    },
    getSearchList () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname + '?staff_name__icontains=' + _this.filter, {
        }).then(res => {
          _this.table_list = res.results
          _this.pathname_previous = res.previous
          _this.pathname_next = res.next
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      } else {
      }
    },
    getListPrevious () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_previous, {
        }).then(res => {
          _this.table_list = res.results
          _this.pathname_previous = res.previous
          _this.pathname_next = res.next
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      } else {
      }
    },
    getListNext () {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_next, {
        }).then(res => {
          _this.table_list = res.results
          _this.pathname_previous = res.previous
          _this.pathname_next = res.next
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      } else {
      }
    },
    reFresh () {
      var _this = this
      _this.getList()
    },
    Scan () {
      var _this = this
      _this.filter = 'aa'
    },
    initWebSocket () {
      var _this = this
      ws = new WebSocket(wsurl + '?sender=' + _this.login_name + '&receiver=' + _this.receiver + '&openid=' + _this.openid)
      ws.onmessage = _this.websocketonmessage
      ws.onopen = _this.websocketonopen
      ws.onerror = _this.websocketonerror
      ws.onclose = _this.websocketclose
    },
    websocketonopen () {
      console.log('Success Connect')
    },
    websocketonerror () {
      var _this = this
      _this.initWebSocket()
    },
    websocketonmessage (e) {
      var _this = this
      if (_this.$q.sessionStorage.getItem('receiver') === JSON.parse(e.data).sender) {
        _this.chat_list.push(JSON.parse(e.data))
      } else {
      }
      _this.Readnum()
      _this.$q.notify({
        message: JSON.parse(e.data).sender + 'Send you a message',
        color: 'deep-purple',
        icon: 'textsms',
        position: 'right',
        actions: [
          {
            label: 'VIEW',
            color: 'yellow',
            handler: () => {
              _this.ChatWith(JSON.parse(e.data).sender)
            }
          }
        ]
      })
    },
    websocketsend () {
      var _this = this
      if (_this.chat_text === '') {
      } else {
        ws.send(_this.chat_text)
        _this.chat_list.push({
          sender: _this.sender + '-' + _this.openid,
          receiver: _this.receiver,
          detail: _this.chat_text,
          create_time: date.formatDate(Date.now(), 'YYYY-MM-DD HH:mm:ss')
        })
        _this.chat_text = ''
      }
    },
    websocketclose (e) {
      console.log('Disconnect', e)
    },
    ChatWith (e) {
      var _this = this
      _this.sender = _this.login_name
      _this.receiver = e
      _this.$q.sessionStorage.set('receiver', e)
      if (_this.sender === _this.receiver) {
        _this.$q.notify({
          message: 'Cannot Chat with yourself',
          icon: 'close',
          color: 'negative'
        })
      } else {
        _this.chat = true
        _this.chat_text = ''
        _this.initWebSocket()
        getauth('chat/?' + 'sender=' + _this.sender + '&receiver=' + _this.receiver).then(res => {
          _this.chat_list = res.results.reverse()
          if (res.next) {
            var next = res.next.split(':')[0]
            var nextpage = res.next.replace(next, window.location.href.split(':')[0])
            _this.chat_next = nextpage
          } else {
            _this.chat_next = res.next
          }
        }).catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
      }
    },
    LoadChatList () {
      var _this = this
      getauth(_this.chat_next).then(res => {
        res.results.forEach(c => {
          _this.chat_list.unshift(c)
        })
        if (res.next) {
          var next = res.next.split(':')[0]
          var nextpage = res.next.replace(next, window.location.href.split(':')[0])
          _this.chat_next = nextpage
        } else {
          _this.chat_next = res.next
        }
      }).catch(err => {
        _this.$q.notify({
          message: err.detail,
          icon: 'close',
          color: 'negative'
        })
      })
    },
    ChatClose () {
      var _this = this
      _this.receiver = ''
      _this.$q.sessionStorage.set('receiver', '')
      _this.chat_list = []
      _this.chat_text = ''
      _this.chat_next = null
    }
  },
  created () {
    var _this = this
    if (LocalStorage.has('openid')) {
      _this.openid = LocalStorage.getItem('openid')
    } else {
      _this.openid = ''
      LocalStorage.set('openid', '')
    }
    if (LocalStorage.has('login_name')) {
      _this.login_name = LocalStorage.getItem('login_name')
    } else {
      _this.login_name = ''
      LocalStorage.set('login_name', '')
    }
    if (LocalStorage.has('auth')) {
      _this.authin = '1'
      _this.getList()
    } else {
      _this.authin = '0'
    }
  },
  mounted () {
    var _this = this
    if (_this.$q.platform.is.electron) {
      _this.height = String(_this.$q.screen.height - 170) + 'px'
    } else {
      _this.height = _this.$q.screen.height - 170 + '' + 'px'
    }
  },
  updated () {
    if (document.getElementById('chat_scroll')) {
      document.getElementById('chat_scroll').scrollTop = document.getElementById('chat_scroll').scrollHeight
    } else {
    }
  },
  destroyed () {
    if (ws) {
      if (ws.readyState === ws.OPEN) {
        ws.close()
      }
    }
  }
}
</script>
